<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>WingPick Pro - 产品详情</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1976D2',
                        'primary-variant': '#0D47A1',
                        secondary: '#FF6F00',
                        'secondary-variant': '#E65100',
                        background: '#F5F5F5',
                        surface: '#FFFFFF',
                        'on-surface': '#212121',
                        'on-surface-variant': '#757575',
                        border: '#E0E0E0',
                        success: '#4CAF50',
                        warning: '#FFC107',
                        error: '#F44336',
                        info: '#2196F3'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .android-card {
                @apply bg-surface rounded-2xl shadow-sm p-4;
            }
            .android-button {
                @apply bg-primary text-white py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .android-button-secondary {
                @apply bg-white text-primary border border-primary py-3 px-6 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .section-title {
                @apply text-xl font-semibold text-on-surface mb-3;
            }
            .param-item {
                @apply flex justify-between py-2 border-b border-border;
            }
            .param-label {
                @apply text-on-surface-variant;
            }
            .param-value {
                @apply font-medium;
            }
            .image-indicator {
                @apply w-2 h-2 rounded-full mx-1;
            }
        }
    </style>
</head>
<body class="bg-background font-roboto text-on-surface min-h-screen">
    <!-- Android 状态栏 -->
    <div class="bg-primary h-7 w-full flex items-center justify-between px-4">
        <div class="text-white text-xs">18:30</div>
        <div class="flex items-center space-x-1">
            <i class="fa fa-signal text-white text-xs"></i>
            <i class="fa fa-wifi text-white text-xs"></i>
            <i class="fa fa-battery-three-quarters text-white text-xs"></i>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="flex items-center h-14 px-4">
            <button id="backButton" class="mr-4">
                <i class="fa fa-arrow-left text-lg"></i>
            </button>
            <div class="text-lg font-semibold flex-1 text-center mr-4">产品详情</div>
            <button>
                <i class="fa fa-share-alt text-lg"></i>
            </button>
        </div>
    </header>

    <!-- 产品图片轮播 -->
    <div class="relative h-60 bg-gray-200">
        <div class="absolute inset-0">
            <img id="mainProductImage" src="../../WingPick Pro/static/AC311A.png" alt="AC311A直升机" class="w-full h-full object-cover">
        </div>
        <!-- 图片指示器 -->
        <div class="absolute bottom-3 left-0 right-0 flex justify-center">
            <div class="image-indicator bg-white"></div>
            <div class="image-indicator bg-white/50"></div>
            <div class="image-indicator bg-white/50"></div>
        </div>
    </div>

    <!-- 产品基本信息 -->
    <div class="android-card -mt-6 mx-4 relative z-10">
        <h1 class="text-2xl font-bold">AC311A</h1>
        <p class="text-on-surface-variant mb-3">轻型多用途直升机</p>
        <div class="flex items-center justify-between mb-2">
            <p class="text-2xl font-semibold text-primary">¥12,500,000</p>
            <p class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-full">起</p>
        </div>
        <div class="flex flex-wrap gap-3">
            <div class="flex items-center">
                <i class="fa fa-users text-on-surface-variant mr-2"></i>
                <span>5座</span>
            </div>
            <div class="flex items-center">
                <i class="fa fa-tachometer text-on-surface-variant mr-2"></i>
                <span>最大速度 258km/h</span>
            </div>
            <div class="flex items-center">
                <i class="fa fa-plane text-on-surface-variant mr-2"></i>
                <span>航程 635km</span>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <main class="p-4 space-y-5 pb-24">
        <!-- 产品简介 -->
        <section>
            <h2 class="section-title">产品简介</h2>
            <div class="android-card">
                <p class="text-sm text-on-surface">AC311A是一款安全可靠、性能优越的轻型多用途直升机，由中国航空工业集团有限公司自主研发。该机型采用单旋翼带尾桨式布局，配备先进的航电系统和舒适的内饰，适用于多种任务场景。</p>
                <p class="text-sm text-on-surface mt-2">AC311A具有良好的高温高原性能，操作简便，维护成本低，是私人飞行、商务出行、空中游览、应急救援等任务的理想选择。</p>
            </div>
        </section>

        <!-- 技术参数 -->
        <section>
            <h2 class="section-title">技术参数</h2>
            <div class="android-card">
                <div class="space-y-1">
                    <div class="param-item">
                        <span class="param-label">机长</span>
                        <span class="param-value">11.24米</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">机高</span>
                        <span class="param-value">3.14米</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">旋翼直径</span>
                        <span class="param-value">10.70米</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">空重</span>
                        <span class="param-value">1,230公斤</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">最大起飞重量</span>
                        <span class="param-value">2,200公斤</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">发动机</span>
                        <span class="param-value">1台Honeywell HTS900</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">最大功率</span>
                        <span class="param-value">550千瓦</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">最大速度</span>
                        <span class="param-value">258公里/小时</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">巡航速度</span>
                        <span class="param-value">235公里/小时</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">航程</span>
                        <span class="param-value">635公里</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">实用升限</span>
                        <span class="param-value">6,000米</span>
                    </div>
                    <div class="param-item">
                        <span class="param-label">载客量</span>
                        <span class="param-value">1名飞行员 + 4名乘客</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 适用场景 -->
        <section>
            <h2 class="section-title">适用场景</h2>
            <div class="android-card">
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-primary/5 p-3 rounded-xl">
                        <i class="fa fa-building text-primary text-xl mb-2"></i>
                        <p class="text-sm font-medium">商务出行</p>
                    </div>
                    <div class="bg-primary/5 p-3 rounded-xl">
                        <i class="fa fa-camera text-primary text-xl mb-2"></i>
                        <p class="text-sm font-medium">空中游览</p>
                    </div>
                    <div class="bg-primary/5 p-3 rounded-xl">
                        <i class="fa fa-heartbeat text-primary text-xl mb-2"></i>
                        <p class="text-sm font-medium">应急救援</p>
                    </div>
                    <div class="bg-primary/5 p-3 rounded-xl">
                        <i class="fa fa-tree text-primary text-xl mb-2"></i>
                        <p class="text-sm font-medium">农林作业</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部操作按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-surface p-4 border-t border-border">
            <div class="flex space-x-3">
                <button class="android-button-secondary flex-1">
                    咨询详情
                </button>
                <button id="configQuoteBtn" class="android-button flex-1">
                    配置报价
                </button>
            </div>
        </div>
    </main>

    <script>
        // 返回按钮点击事件
        document.getElementById('backButton').addEventListener('click', function() {
            window.history.back();
        });

        // 配置报价按钮点击事件
        document.getElementById('configQuoteBtn').addEventListener('click', function() {
            window.location.href = 'config-engine.html?product=AC311A';
        });

        // 图片轮播功能（简单实现）
        const images = [
            '../../WingPick Pro/static/AC311A.png',
            'https://images.unsplash.com/photo-1610639423563-ea4f1a541e47?q=80&w=600&auto=format&fit=crop',
            'https://images.unsplash.com/photo-1567538001901-5e1a359d898b?q=80&w=600&auto=format&fit=crop'
        ];
        let currentImageIndex = 0;
        const mainImage = document.getElementById('mainProductImage');
        const indicators = document.querySelectorAll('.image-indicator');

        function updateImage(index) {
            mainImage.src = images[index];
            indicators.forEach((indicator, i) => {
                if (i === index) {
                    indicator.classList.remove('bg-white/50');
                    indicator.classList.add('bg-white');
                } else {
                    indicator.classList.remove('bg-white');
                    indicator.classList.add('bg-white/50');
                }
            });
            currentImageIndex = index;
        }

        // 添加图片点击切换
        mainImage.addEventListener('click', function() {
            let nextIndex = (currentImageIndex + 1) % images.length;
            updateImage(nextIndex);
        });

        // 添加指示器点击事件
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', function() {
                updateImage(index);
            });
        });
    </script>
</body>
</html>